<template>
  <div>
		<van-nav-bar  title="订单详情" left-arrow @click-left="$utils.back($route.path)" />	
			<div class="nav-top" >
					<div class="title"><span class="status">待服务</span></div>
					<!-- 订单顶部 -->
					<orderTop></orderTop> 

					<!-- 订单内容 -->
					<div class="bg-white mg-24 pd-24 br-16">
						<div class="flex flex-s-c ">							
							<div class="fs-28">服务项目</div>
							<div class="flex endtitle">
								<div class="color-gray7 mr-18">距离结束</div>
							<div class="endtime">02</div>:<div class="endtime">32</div>:<div class="endtime">34</div></div>
						</div>
						<div>
							<div class="service_item ptb-24">
								<div style="width: 112px;height: 90px;">
									<img src="@/assets/images/referrer_bg1.jpg" />
								</div>
								<div class="ml-24 service_content">
									<div class="service_name">泰式SPA</div>
									<div class="flex flex-s-c"><div class="color-gray7">服务时长：120分钟</div><div class="renew">加钟</div></div>
									<div class="flex flex-s-c mt-46">
										<div><span class="service_unit fs-28">￥</span><span class="service_price">940.00</span> <span>x1</span></div>										
										<div class="verifica">核销码</div>
									</div>
								</div>								
							</div>
						</div>						
					</div>

					<!-- 订单支付相关信息 -->
					<orderMsg></orderMsg>
					
					<!-- 底部确认订单 -->
					<div class="fixed-bottom">
						<div class="flex flex-fe-c ptb-20 plr-25 bg-white bottom-box">
								<button class="bg-tp bd-solid  btn fs-28  mr-16" @click.stop="cancle">取消订单</button>
								<button class="bg-physio-primary1 color-white fs-28  btn" @click.stop="submitOrder">立即支付</button>
																	
						</div>
					</div>
			</div>
  </div>
</template>
<script>
import orderTop from 'components/physioOrder/orderTop.vue'
import orderMsg from 'components/physioOrder/orderMsg.vue'
export default ({
	components: {
    orderTop,orderMsg
  },

})
</script>
<style lang="scss" scoped>
	.nav-top{
		width: 750px;
		height: 350px;
		background: linear-gradient(180deg, #7459FF 0%, rgba(116,89,255,0) 100%);
	}
	.title{
		color: #fff;
		padding: 32px 0 20px 24px;
		display: flex;
		align-items: center;
		font-family: PingFangSC-Regular, PingFang SC;
		.status{
			font-size: 40px;
			font-weight: 500;
			margin-right: 16px;
		}
	}
	
	.service_item{
		display: flex;
		border-bottom: 2px solid #F2F3FC;
	}
	.service_name{
		font-size: 32px;
		color: $black2;
		margin-bottom: 12px;
	}
	.mt-46{
		margin-top: 46px;
	}
	.service_unit{
		color: #EC612A;
	}
	.service_price{
		font-size: 36px;
		font-weight: bold;
		color: #EC612A;
		margin-right: 8px;
	}
	.btn{
		width: 224px;
		line-height: 72px;
		border-radius: 36px;
	}
	.service_content{
		width: calc(100% - 224px);
	}
	.renew{
		width: 128px;
		height: 48px;
		line-height: 48px;
		background: #4CA3F7;
		border-radius: 32px;
		color: #FFFFFF;
		text-align: center;
	}
	.verifica{
		width: 128px;
		height: 48px;
		line-height: 48px;
		background: #FFFFFF;
		border-radius: 32px;
		border: 1px solid #666666;
		text-align: center;
	}
	.endtitle{
		align-items: center;
		height: 40px;
	}
	.endtime{
		width: 40px;
		height: 40px;
		background: #34267F;
		border-radius: 4px;
		font-size: 28px;
		color: #fff;
		text-align: center;
		margin: 0 8px;
	}
</style>
